<!DOCTYPE html>
<html>
  
<!-- Mirrored from www.dba.cn/book/electron/ELECTRONKaiFa/ELECTRONWINDOWTiJiaoZhiNan.html by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 20 Mar 2022 10:24:15 GMT -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>electron window 提交指南 - Electron中文手册</title>
    <link rel="stylesheet" type="text/css" href="../../skins/cms/css/min-easyui.css">
    <link rel="stylesheet" type="text/css" href="../../skins/cms/css/book.css">
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../skins/cms/js/m-easyui.js"></script>
    <script type="text/javascript" src="../../skins/cms/js/prettify.js"></script>
  </head>
  <body class="easyui-layout" style="text-align:left">
    <div region="north" border="false" class="group wrap header" style="height:66px;font-size:100%">
      <div class="header">
        <div class="navigation-toggle" data-tools="navigation-toggle" data-target="#navbar-1">
          <span>Electron中文手册</span>
        </div>
        <div id="elogo" class="navbar navbar-left">
          <ul>
            <li>
              <h1><a href="../index.html">Electron中文手册</a></h1>
            </li>
          </ul>
        </div>
      <div style="clear:both"></div>
    </div>
   </div>
    <div region="west" split="true" data-options="collapsedSize:0,hideExpandTool:true" title="文档目录" style="width:20%;min-width:300px;padding:5px;display:none;">
        
      <ul class="easyui-tree"> 
        <li iconcls="icon-base"><span>Electron 教程</span><ul><li iconcls="icon-gears"><a href="../ELECTRONJiaoCheng/ELECTRONJiaoChengJianJie.html">Electron 教程简介</a></li><li iconcls="icon-gears"><a  href="../ELECTRONJiaoCheng/ELECTRONKuaiSuRuMen.html">Electron 快速入门</a></li><li iconcls="icon-gears"><a  href="../ELECTRONJiaoCheng/ELECTRONZhuoMianHuanJingJiCheng.html">Electron 桌面环境集成</a></li><li iconcls="icon-gears"><a  href="../ELECTRONJiaoCheng/ELECTRONZaiXianLiXianShiJianTanCe.html">Electron 在线/离线事件探测</a></li><li iconcls="icon-gears"><a  href="../ELECTRONJiaoCheng/ELECTRONJinCheng.html">Electron 进程</a></li><li iconcls="icon-gears"><a  href="../ELECTRONJiaoCheng/ELECTRONZhiChiDeCHROMEMingLingXingKaiGuan.html">Electron 支持的 Chrome 命令行开关</a></li><li iconcls="icon-gears"><a  href="../ELECTRONJiaoCheng/ELECTRONHuanJingBianLiang.html">Electron 环境变量</a></li><li iconcls="icon-gears"><a  href="../ELECTRONJiaoCheng/ELECTRONZhiChiDePingTai.html">Electron 支持的平台</a></li><li iconcls="icon-gears"><a  href="../ELECTRONJiaoCheng/ELECTRONYingYongBuShu.html">Electron 应用部署</a></li><li iconcls="icon-gears"><a  href="../ELECTRONJiaoCheng/ELECTRONXiangMACAPPSTOREYingYongTiJiaoXiangDao.html">Electron 向Mac App Store 应用提交向导</a></li><li iconcls="icon-gears"><a  href="../ELECTRONJiaoCheng/ELECTRONYingYongDaBao.html">Electron 应用打包</a></li><li iconcls="icon-gears"><a  href="../ELECTRONJiaoCheng/ELECTRONShiYongYuanShengMoKuai.html">Electron 使用原生模块</a></li><li iconcls="icon-gears"><a  href="../ELECTRONJiaoCheng/ELECTRONZhuJinChengDiaoShi.html">Electron 主进程调试</a></li><li iconcls="icon-gears"><a  href="../ELECTRONJiaoCheng/ELECTRONShiYongSELENIUMHeWEBDRIVER.html">Electron 使用 Selenium 和 WebDriver</a></li><li iconcls="icon-gears"><a  href="../ELECTRONJiaoCheng/ELECTRONDEVTOOLSKuoZhan.html">Electron DevTools扩展</a></li><li iconcls="icon-gears"><a  href="../ELECTRONJiaoCheng/ELECTRONShiYongPEPPERFLASHChaJian.html">Electron 使用 Pepper Flash 插件</a></li><li iconcls="icon-gears"><a  href="../ELECTRONJiaoCheng/ELECTRONShiYongWIDEVINECDMChaJian.html">Electron 使用 Widevine CDM 插件</a></li><li iconcls="icon-gears"><a  href="../ELECTRONJiaoCheng/ELECTRONShuYuBiao.html">Electron 术语表</a></li><li iconcls="icon-gears"><a  href="../ELECTRONJiaoCheng/ELECTRONLiPingRan.html">Electron 离屏渲染</a></li><li iconcls="icon-gears"><a  href="../ELECTRONJiaoCheng/ELECTRONJiaoHuShiJieShiQiREPL.html">Electron 交互式解释器 (REPL)</a></li></ul></li><li iconcls="icon-base"><span>Electron API</span><ul><li iconcls="icon-gears"><a  href="../ELECTRONAPI/ELECTRONDOMFILEDuiXiang.html">Electron DOM File对象</a></li><li iconcls="icon-gears"><a  href="../ELECTRONAPI/ELECTRONDOMWEBVIEWBiaoQian.html">Electron DOM <webview> 标签</a></li><li iconcls="icon-gears"><a  href="../ELECTRONAPI/ELECTRONWINDOWOPENHanShu.html">Electron window.open 函数</a></li></ul></li><li iconcls="icon-base"><span>在主进程内可用的模块</span><ul><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONAPPMoKuai.html">Electron app 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONAUTOUPDATERMoKuai.html">Electron autoUpdater 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONBROWSERWINDOWMoKuai.html">Electron BrowserWindow 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONCONTENTTRACINGMoKuai.html">Electron contentTracing 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONDIALOGMoKuai.html">Electron dialog 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONGLOBAL-SHORTCUTMoKuai.html">Electron global-shortcut 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONIPCMAINMoKuai.html">Electron ipcMain 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONMENUMoKuai.html">Electron menu 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONMENUITEMMoKuai.html">Electron MenuItem 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONPOWERMONITORMoKuai.html">Electron powerMonitor 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONPOWERSAVEBLOCKERMoKuai.html">Electron powerSaveBlocker 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONPROTOCOLMoKuai.html">Electron protocol 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONSESSIONMoKuai.html">Electron session 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONWEBCONTENTSMoKuai.html">Electron webContents 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONTRAYMoKuai.html">Electron Tray 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONLOCALES.html">Electron Locales</a></li></ul></li><li iconcls="icon-base"><span>在渲染进程（网页）内可用的模块</span><ul><li iconcls="icon-gears"><a  href="../ZaiRanJinChengWangYeNeiKeYongDeMoKuai/ELECTRONDESKTOPCAPTURERMoKuai.html">Electron desktopCapturer 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiRanJinChengWangYeNeiKeYongDeMoKuai/ELECTRONIPCRENDERERMoKuai.html">Electron ipcRenderer 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiRanJinChengWangYeNeiKeYongDeMoKuai/ELECTRONREMOTEMoKuai.html">Electron remote 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiRanJinChengWangYeNeiKeYongDeMoKuai/ELECTRONWEBFRAMEMoKuai.html">Electron webFrame 模块</a></li></ul></li><li iconcls="icon-base"><span>两种进程都可用的模块</span><ul><li iconcls="icon-gears"><a  href="../LiangZhongJinChengDuKeYongDeMoKuai/ELECTRONCLIPBOARDMoKuai.html">Electron clipboard 模块</a></li><li iconcls="icon-gears"><a  href="../LiangZhongJinChengDuKeYongDeMoKuai/ELECTRONCRASHREPORTERMoKuai.html">Electron crashReporter 模块</a></li><li iconcls="icon-gears"><a  href="../LiangZhongJinChengDuKeYongDeMoKuai/ELECTRONNATIVEIMAGEMoKuai.html">Electron nativeImage 模块</a></li><li iconcls="icon-gears"><a  href="../LiangZhongJinChengDuKeYongDeMoKuai/ELECTRONSCREENMoKuai.html">Electron screen 模块</a></li><li iconcls="icon-gears"><a  href="../LiangZhongJinChengDuKeYongDeMoKuai/ELECTRONSHELLMoKuai.html">Electron shell 模块</a></li></ul></li><li iconcls="icon-base"><span>Electron 开发</span><ul><li iconcls="icon-gears"><a  href="ELECTRONBianMaGuiFan.html">Electron 编码规范</a></li><li iconcls="icon-gears"><a  href="ELECTRONYuanMaMuLuJieGou.html">Electron 源码目录结构</a></li><li iconcls="icon-gears"><a  href="ELECTRONHeNWJSYuanMingNODE-WEBKITZaiJiShuShangDeChaYi.html">Electron 和 NW.js (原名 node-webkit) 在技术上的差异</a></li><li iconcls="icon-gears"><a  href="ELECTRONGouJianXiTongGaiLan.html">Electron 构建系统概览</a></li><li iconcls="icon-gears"><a  href="ELECTRONGouJianBuZhouOSX.html">Electron 构建步骤 (OS X)</a></li><li iconcls="icon-gears"><a  href="ELECTRONGouJianBuZhouWINDOWS.html">Electron 构建步骤 (Windows)</a></li><li iconcls="icon-gears"><a  href="ELECTRONGouJianBuZhouLINUX.html">Electron 构建步骤 (Linux)</a></li><li iconcls="icon-gears"><a  href="ELECTRONZaiDiaoShiZhongShiYongSYMBOLSERVER.html">Electron 在调试中使用 Symbol Server</a></li><li iconcls="icon-gears"><a  href="ELECTRONChangJianWenTi.html">Electron 常见问题</a></li><li iconcls="icon-gears"><a  href="ELECTRONBanBenGuanLi.html">Electron 版本管理</a></li><li iconcls="icon-gears"><a  href="ELECTRONWINDOWTiJiaoZhiNan.html">electron window 提交指南</a></li><li iconcls="icon-gears"><a  href="ZiDongHuaChiXuJiChengXiTongCICeShi.html">自动化持续集成系统（CI）测试</a></li><li iconcls="icon-gears"><a  href="ELECTRONWenDangFengGeZhiNan.html">Electron 文档风格指南</a></li></ul></li>
      </ul>
    
    </div>
    <div region="center">
      <div id="tt" class="easyui-tabs" fit="true" border="false" plain="true">
        <div title="electron window 提交指南 - Electron中文手册">  
            <div class="book-content">
              
      <div style="padding:8px;"> &gt; <a href="../index.html">Electron中文手册</a> &gt; electron window 提交指南</div>
      <div class="content"><p>在 Windows 8 中, 一些不错的旧 win32 程序迎来了一个新朋友: 通用Windows平台(UWP)。 新的 <code>.appx</code> 格式不仅启用了许多新的强大的 API，如 Cortana 或推送通知，而且通过Windows 应用商店，也同时简化了安装和更新。</p>
<p>Microsoft 开发了一个工具，将 Electron 应用程序编译为 .appx 软件包，使开发人员能够使用新应用程序模型中的一些好东西。 本指南解释了如何使用它 - 以及 Electron AppX 包的功能和限制。</p>
<h2>
背景和要求</h2>
<p>Windows 10 的 "周年更新" 能够运行 win32 <code>.exe</code> 程序并且它们的虚拟化文件系统和注册表跟随一起启动。 两者都是通过在 Windows 容器中运行应用程序和安装器编译后创建的，允许 Windows 在安装过程中正确识别操作系统进行了哪些修改。 将可执行文件和虚拟文件系统与虚拟注册表配对, 允许 Windows 启用一键安装和卸载。</p>
<p>此外，exe 在 appx 模型内启动 - 这意味着它可以使用通用 Windows 平台可用的许多 API。 为了获得更多的功能，Electron 应用程序可以与一个看不见的 UWP 后台任务配合使用，它与 <code>exe</code> 一起启动，作为后台运行任务的接收器，接收推送通知或与其他 UWP 应用程序通信 。</p>
<p>要编译任何现有的 Electron 应用程序，请确保满足以下要求:</p>
<ul>
<li>Windows 10及周年更新 (2016年8月2日发布的)</li>
<li>Windows 10 SDK, 这里下载
</li>
<li>最新的 Node 4 (运行 <code>node -v</code> 来确认)</li>
</ul>
<p>然后, 安装 <code>electron-windows-store</code> CLI:</p>
<pre><code>npm install -g electron-windows-store
</code></pre>
<h2>
步骤 1: 打包你的 Electron 应用程序</h2>
<p>打包应用程序使用 electron-packager (或类似工具). 确保在最终的应用程序中删除不需要的 <code>node_modules</code>, 因为这些你不需要模块只会额外增加你的应用程序的大小.</p>
<p>结构输出应该看起来大致像这样:</p>
<pre><code>├── Ghost.exe
├── LICENSE
├── content_resources_200_percent.pak
├── content_<a href="../../shell/index.html">shell</a>.pak
├── d3Dcompiler_47.dll
├── ffmpeg.dll
├── icudtl.dat
├── libEGL.dll
├── libGLESv2.dll
├── locales
│   ├── am.pak
│   ├── ar.pak
│   ├── [...]
├── natives_blob.bin
├── node.dll
├── resources
│   ├── app
│   └── <a href="../../atom/index.html">atom</a>.asar
├── snapshot_blob.bin
├── squirrel.exe
├── ui_resources_200_percent.pak
└── xinput1_3.dll
</code></pre>
<h2>
步骤 2: 运行 electron-windows-store</h2>
<p>从提权的 PowerShell（用管理员身份运行它）中,以所需的参数运行 <code>electron-windows-store</code>，传递输入和输出目录，应用程序的名称和版本，以及确认<code>node_modules</code>应该是扁平的。</p>
<pre><code>electron-windows-store `
    --input-directory C:\myelectronapp `
    --output-directory C:\output\myelectronapp `
    --flatten true `
    --package-version 1.0.0.0 `
    --package-name myelectronapp
</code></pre>
<p>一旦执行，工具就开始工作：它接受您的 Electron 应用程序作为输入，展平 <code>node_modules</code>。 然后，它将应用程序归档为 <code>app.zip</code>。 使用安装程序和 Windows 容器，该工具创建一个“扩展的” AppX 包 - 包括 Windows 应用程序清单 （<code>AppXManifest.xml</code>）以及虚拟文件系统和输出文件夹中的虚拟注册表。</p>
<p>当创建扩展的 AppX 文件后，该工具使用 Windows App Packager（<code>MakeAppx.exe</code>）将磁盘上的这些文件创建为单文件 AppX 包。 最后，该工具可用于在计算机上创建可信证书，以签署新的 AppX 包。 使用签名的 AppX 软件包，CLI也可以自动在您的计算机上安装软件包。</p>
<h2>
步骤 3: 使用 AppX 包</h2>
<p>为了运行您的软件包，您的用户将需要将 Windows 10 安装“周年纪念更新” - 有关如何更新Windows的详细信息可以在这里找到</p>
<p>与传统的UWP应用程序不同，打包应用程序目前需要进行手动验证过程，您可以在这里申请. 在此期间，所有用户都能够通过双击安装包来安装您的程序，所以如果您只是寻找一个更简单的安装方法，可能不需要提交到商店。</p>
<p>在受管理的环境中（通常是企业）, <code>Add-AppxPackage</code> PowerShell Cmdlet 可用于以自动方式安装它。</p>
<p>另一个重要的限制是编译的 AppX 包仍然包含一个 win32 可执行文件，因此不会在 Xbox，HoloLens 或 Phones 中运行。</p>
<h2>
可选: 使用 BackgroundTask 添加 UWP 功能</h2>
<p>您可以将 Electron 应用程序与不可见的 UWP 后台任务配对，以充分利用 Windows 10 功能，如推送通知，Cortana 集成或活动磁贴。</p>
<p>如何使用 Electron 应用程序通过后台任务发送 Toast 通知和活动磁贴,请查看微软提供的案例.</p>
<h2>
可选: 使用容器虚拟化进行转换</h2>
<p>要生成 AppX 包，<code>electron-windows-store</code> CLI 使用的模板应该适用于大多数 Electron 应用程序。 但是，如果您使用自定义安装程序，或者您遇到生成的包的任何问题，您可以尝试使用 Windows 容器编译创建包 - 在该模式下，CLI 将在空 Windows 容器中安装和运行应用程序，以确定应用程序正在对操作系统进行哪些修改。</p>
<p>在运行 CLI 之前，您必须设置 “Windows Desktop App Converter” 。 这将需要几分钟，但不要担心 - 你只需要这样做一次。 从这里下载 Desktop App Converter</p>
<p>您将得到两个文件： <code>DesktopAppConverter.zip</code> 和 <code>BaseImage-14316.wim</code>.</p>
<ol>
<li>解压 <code>DesktopAppConverter.zip</code>. 打开提权的 PowerShell (用"以管理员权限运行"打开, 确保您的系统执行策略允许我们通过调用 <code>Set-ExecutionPolicy bypass</code> 来运行我们想要运行的一切).</li>
<li>然后, 通过调用 <code>.\DesktopAppConverter.ps1 -Setup -BaseImage .\BaseImage-14316.wim</code>, 运行 Desktop App Converter 安装，并传递 Windows 基本映像的位置 (下载的 <code>BaseImage-14316.wim</code>).</li>
<li>如果运行以上命令提示您重新启动，请重新启动计算机，并在成功重新启动后再次运行上述命令。</li>
</ol>
<p>当安装成功后，您可以继续编译你的 Electron 应用程序。</p></div>
      <div class="prev-next" style="padding:8px;">上一篇：<a class="prev" href="ELECTRONBanBenGuanLi.html">Electron 版本管理</a><br>下一篇：<a class="prev" href="ZiDongHuaChiXuJiChengXiTongCICeShi.html">自动化持续集成系统（CI）测试</a><br></div>
    
            </div>
        </div> 
      </div>
    </div>
  </body>

<!-- Mirrored from www.dba.cn/book/electron/ELECTRONKaiFa/ELECTRONWINDOWTiJiaoZhiNan.html by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 20 Mar 2022 10:24:15 GMT -->
</html>